<template>
  <view class="page_box">
    <!-- 搜索栏 -->
    <view class="search_box">
      <div class="nav-box">
        <div
          class="jointly"
          :class="active == 1 && 'active'"
          @click="checkData(1)"
        >
          优选
        </div>
        <div
          class="jointly"
          :class="active == 2 && 'active'"
          @click="checkData(2)"
        >
          差评
        </div>
        <div
          class="active-line"
          :style="active == 2 ? { left: '49%' } : { left: '0%' }"
        ></div>
      </div>
      <input
        class="uni-input"
        :style="{ width: isFocus ? '333rpx' : '222rpx' }"
        placeholder="搜一下"
        @focus="handleFocus"
        @blur="handleBlur"
      />
    </view>
    <!-- 列表 -->
    <scroll-view
      scroll-y
      :scroll-top="scrollTop"
      @scroll="scrollFn"
      scroll-with-animation
      class="waterfall-container"
    >
      <view
        v-for="(item, index) in textData"
        :key="index"
        class="list_box"
        @click="toInfo"
      >
        <div class="title">
          <img class="avatar" src="../../../static/logo.png" alt="" />
          <div class="name">{{ item.name }}</div>
        </div>
        <div class="line"></div>
        <div class="content">
          <p class="evaluate">评论:</p>
          <p class="text">{{ item.text }}</p>
        </div>
        <div class="line"></div>
        <div class="other">
          <div class="time">上传时间：{{ item.time }}</div>
          <up-rate
            :count="count"
            v-model="item.rank"
            :readonly="true"
            active-color="#fcc12d"
            size="16"
          ></up-rate>
        </div>
      </view>
    </scroll-view>
    <movable-box :movableStyle="movableStyle" :balls="balls">
      <template #slot1>
        <img class="img-box" src="../../../static/img/law.png" alt="" />
      </template>
      <template #slot2>
        <img class="img-box" src="../../../static/img/goTop.png" alt="" />
      </template>
      <template #slot3>
        <img class="img-box" src="../../../static/img/service.png" alt="" />
      </template>
    </movable-box>
  </view>
</template>

<script setup>
import { ref, nextTick } from "vue";
import { movableBox } from "../../../components/u-movable/index.vue";
import textData from "./textData";

let movableStyle = ref({
  width: 40,
  height: 40,
  top: 400,
  right: 0,
});
let balls = ref([
  {
    angle: 0,
    style: { right: 0, top: 0, width: 0, height: 0, opacity: 0 },
    slotName: "slot1",
    fn: ballsFn1,
  },
  {
    angle: 0,
    style: { right: 0, top: 0, width: 0, height: 0, opacity: 0 },
    slotName: "slot2",
    fn: ballsFn2,
  },
  {
    angle: 0,
    style: { right: 0, top: 0, width: 0, height: 0, opacity: 0 },
    slotName: "slot3",
    feedback: true,
  },
]);
const scrollTop = ref(0);
const old = ref({ scrollTop: 0 });
const active = ref(1);

// 接入接口
const checkData = (index) => {
  active.value = index;
};

const isFocus = ref(false);
const handleFocus = () => {
  isFocus.value = true;
};
const handleBlur = () => {
  isFocus.value = false;
};
// 保存当前距离页面顶部的位置
const scrollFn = (e) => {
  old.value.scrollTop = e.detail.scrollTop;
};
// 劳动法
function ballsFn1() {
  uni.navigateTo({
    url: "/pages/labourlaw",
  });
}
// 跳转详情
const toInfo = () => {
  uni.navigateTo({
    url: "/pages/tabbar-info/index",
  });
};
// 回到顶部
function ballsFn2() {
  scrollTop.value = old.value.scrollTop;
  nextTick(() => {
    scrollTop.value = 0;
  });
}
</script>

<style lang="scss" scoped>
.page_box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #f2f2f2;

  .search_box {
    width: 100%;
    height: 98rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0px 30rpx;
    box-sizing: border-box;
    overflow: hidden;
    background: #fff;

    .nav-box {
      height: 100%;
      display: flex;
      align-items: center;
      font-size: 32rpx;
      position: relative;

      .jointly {
        height: 100%;
        margin-right: 22rpx;
        position: relative;
        line-height: 98rpx;
      }

      .active {
        font-weight: bold;
        font-size: 36rpx;
      }

      .active-line {
        position: absolute;
        width: 35px;
        height: 4px;
        border-radius: 2px;
        background: #b00a0a;
        bottom: 0%;
        transition: all 0.4s ease;
      }
    }

    .uni-input {
      width: 222rpx;
      height: 52rpx;
      padding-left: 14rpx;
      border-radius: 26rpx;
      box-sizing: border-box;
      background: #fff;
      border: 1px solid #626262;
      font-size: 24rpx;
      transition: all 0.4s ease;
    }
  }

  // .scroll-Y{
  //   width: 100%;
  //   height: calc(100vh - 110rpx);
  // }
  .waterfall-container {
    width: 100%;
    height: calc(100vh - 110rpx);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow-x: hidden;
    overflow-y: scroll;
    padding: 0 24rpx;
    box-sizing: border-box;

    .list_box {
      width: 100%;
      height: 288rpx;
      position: relative;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      background: #fff;
      padding: 16rpx;
      box-sizing: border-box;
      margin-bottom: 24rpx;

      &:first-child {
        margin-top: 24rpx;
      }

      .title {
        width: 100%;
        display: flex;
        justify-content: flex-start;
        align-items: center;

        .avatar {
          width: 50rpx;
          height: 50rpx;
          object-fit: cover;
          margin-right: 14rpx;
        }

        .name {
          font-size: 30rpx;
          color: #000;
        }
      }

      .line {
        width: 100%;
        height: 1rpx;
        background-color: #eeeeee;
        margin: 8px 0;
      }

      .content {
        width: 100%;
        display: flex;
        align-items: flex-start;
        justify-content: flex-start;
        font-size: 24rpx;
        color: #363636;
        opacity: 0.8;
        margin: 10px 0;

        .evaluate {
          flex-shrink: 0;
          margin-right: 6px;
        }

        .text {
          line-height: 32rpx;
          overflow: hidden;
          display: -webkit-box;
          -webkit-line-clamp: 3;
          -webkit-box-orient: vertical;
          text-align: justify;
        }
      }
      .other {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
          color: #363636;
          font-size: 24rpx;
          opacity: 0.8;
        }
      }
    }
  }
}

.img-box {
  width: 100%;
  height: 100%;
}

// .btn-box {
//   width: 100%;
//   height: 6%;
//   display: flex;
//   align-items: center;
//   justify-content: center;
// }

// .mini-btn {
//   border: 1px solid #626262 !important;
//   color: #626262 !important;
// }
</style>
